// @ts-nocheck
import React, { FC, useState, useEffect } from 'react'
import style from '@/style/articles/tags.module.scss'
import axios from '@/api/request'
import { useTranslation } from 'react-i18next'
import { useNavigate } from 'react-router-dom'

const Tags: FC = ({ change, reset }) => {
  const navigate = useNavigate()
  // 获取数据
  const [data, setData] = useState([])
  const { t } = useTranslation()
  useEffect(() => {
    // eslint-disable-next-line @typescript-eslint/no-floating-promises
    axios.get('/wipi/api/tag').then(res => {
      setData(res.data)
    })
  }, [])

  // 监听滚动条
  const [tops, setTops] = useState(0)
  setInterval(() => {
    setTops(document.documentElement.scrollTop)
  }, 100)

  // 跳转路由
  const btn = (value): any => {
    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
    navigate(`/articles/tag/${value}`)
    change(-1)
    reset()
  }

  return <div className={style.tags} style={tops > 100 ? { top: '370px' } : { top: '440px' }}>
    <h4>{t('tag')}</h4>
    <div className={style.box}>
    {
      data.map((item: any, index) => {
        // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
        return <span onClick={() => btn(item.value)} key={index}>{item.label}[{item.articleCount}]</span>
      })
    }
    </div>
  </div>
}

export default Tags
